@charset "utf-8";
@import "../../../layout/sass/_mixin-fun.scss";

.left {
	background: white;
	background: rgba(255, 255, 255, 0.4);
	width: rem(330);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	z-index: 2;
	padding-top: rem(90);
	.head {
		img {
			display: block;
			margin: rem(20) auto;
			width: rem(120);
			height: rem(120);
			border-radius: 100%;
		}//img
		p.title {
			color: #444;
			@include font(12);
			text-align: center;
		}
	}//head
	.num {
		padding: 0 rem(20);
		margin-top: rem(30);
		.block {
			width: 33.3333%;
			text-align: center;
			float: left;
			p.b1 {
				color: #de4949;
				@include font(20);
			}
			p.b2 {
				margin-top: rem(15);
				@include font(10);
				color: #395366;
			}
		}//block
	}//num
	.bt {
		height: 55%;
		border-top: 1px solid white;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		p.title {
			position: absolute;
			top: rem(120);
			@include font(12);
			color: #395366;
			text-align: center;
			left: 0;
			width: 100%;
		}
		.circle {
			width: rem(210);
			height: rem(210);
			border-radius: 100%;
			position: absolute;
			top: rem(195);
			left: 50%;
			margin-left: rem(-105);
		}//circle
	}//bt
}
.right {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(/img/uf-bg.png) no-repeat center center;
	background-size: 100% 100%;
	padding-left: rem(330);
	.main {
		width: 100%;
		height: 100%;
		position: relative;
		.head {
			top: 5%;
			left: 50%;
			margin-left: rem(-495);
			position: absolute;
			width: rem(990);
			color: #395366;
			text-align: center;
			font-weight: 600;
			p.title {
				@include font(24);
			}
			p.o-t {
				@include font(14);
				margin-top: rem(15);
				color: #747E85;
			}
		}//head
		.show {
			width: rem(1056);
			position: absolute;
			left: 50%;
			margin-left: rem(-528);
			top: 28.2%;
			.block {
				float: left;
				width: rem(264);
				padding: 0 rem(32);
				position: relative;
				p {
					color: white;
					@include font(12);
					margin-bottom: rem(15);
					text-align: center;
				}
				img {
					width: rem(200);
					height: rem(200);
					display: block;
					z-index: 1;
					position: relative;
				}
				.bt {
					width: rem(200);
					position: absolute;
					top: rem(154);
					left: rem(32);
					height: rem(320);
					background: url(/img/uf-bt.png) no-repeat;
					background-size: 100% 100%;
					padding-top: rem(120);
					p.title {
						color: white;
						@include font(8);
						i {
							color: $global-color;
						}
					}//title
					.status {
						margin-top: rem(55);
						text-align: center;
						color: white;
						position: relative;
						p.fin {
							@include font(14);
						}
						p.uf {
							@include font(8);
							margin-bottom: rem(10);
						}
						a {
							display: block;
							width: rem(100);
							height: rem(34);
							background: $global-color;
							border-radius: 4px;
							color: white;
							@include font(8);
							margin: 0 auto;
							line-height: rem(34);
						}
					}
				}//bt
			}//block
		}//show
		.to-know {
			width: rem(990);
			position: absolute;
			left: 50%;
			margin-left: rem(-495);
			top: 76.8%;
			color: white;
			p.title {
				@include font(10);
				font-weight: 600;
				margin-bottom: rem(20);
			}
			p.o-t {
				@include font(7);
				margin-bottom: rem(25);
				max-width: rem(910);
			}
			a {
				width: rem(140);
				height: rem(36);
				display: block;
				line-height: rem(36);
				background: $global-color;
				color: white;
				@include font(8);
				text-align: center;
				border-radius: 3px;
			}
		}//to-know
	}
}